import React, { Component } from "react";
import PropTypes from "prop-types";

import GroupHeader from "./groupHeader";

// compoents
import { TimeLine } from "../../components/TimeLine/index.js";
import { alertJSAPIDatePicker } from "../../components/DatePicker/index";

import Icon from "../../components/Icon/index";

// utils
import navigate from "../../utils/navigation.js";
import { get } from "../../utils/db.js";

const TimeLineItem = TimeLine.Item;

const colorMapper = {
  success: "gray",
  agree: "green",
  running: "orange",
  failure: "red"
};

function getReplacement(editable, item, onAddHireTime) {
  if (editable)
    return (
      <div className="growth-current-replacement waterMark">
        <div
          className="growth-current-add-date"
          onClick={alertJSAPIDatePicker.bind(null, new Date(), date =>
            onAddHireTime({
              date,
              item
            })
          )}
        >
          添加时间
        </div>
      </div>
    );
  return "";
}

export default class CurrentJob extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { isAdmin, self } = this.props;
    const { history = [] } = this.props.jobInfo;
    // 如果支持跳转其他系统，加上下面代码
    // onClick={() => navigate("aflow", get("corpId"), "789")}
    const fitHistory = history;
    if (fitHistory.length === 1) {
      fitHistory.push({
        resumeSummaryVPO: {
          title: <span style={{ color: "#3296FA" }}>期待更精彩的表现...</span>
        },
        resumeDetailsVPO: {}
      });
    }
    return (
      <div className="growth-current-job waterMark">
        <GroupHeader
          title={"成长记录"}
          color="blue"
          icon={
            <img
              className="growth-profile-icon"
              src="https://gw.alicdn.com/tfs/TB1Pu6IdjihSKJjy0FeXXbJtpXa-80-80.png"
            />
          }
        />
        {history && history.length !== 0 ? (
          <div className="growth-current-timeline">
            <TimeLine>
              {history.reverse().map((item, idx) => {
                let clickFn;
                if (
                  !item.resumeSummaryVPO.autoTrigger &&
                  item.resumeDetailsVPO.relatationId &&
                  !self
                ) {
                  clickFn = () =>
                    navigate({
                      system: "aflow",
                      corpId: get("corpId"),
                      id: item.resumeDetailsVPO.relatationId
                    });
                }
                return (
                  <TimeLineItem
                    key={idx}
                    replacement={getReplacement(
                      item.updateFlag && isAdmin && !self,
                      item,
                      this.props.onAddHireTime
                    )}
                    date={item.resumeTime || ""}
                    color={idx > 0 ? "gray" : "blue"}
                    onClick={clickFn}
                  >
                    <div className="growth-timeline-title">
                      {item.resumeSummaryVPO.title}
                      {clickFn ? (
                        <a className="growth-timeline-title-link">
                          <Icon type="right" />
                        </a>
                      ) : null}
                    </div>
                    <div className="growth-timeline-username">
                      {item.resumeType === "handOver" &&
                        item.resumeResult === "agree" &&
                        item.resumeSummaryVPO.handOverUserName &&
                        `工作交接人：${item.resumeSummaryVPO.handOverUserName}`}
                    </div>
                    <div className="growth-timeline-desc">
                      {/* 自己看自己， 并且是离职申请，并且该申请已经被审批通过，并且是没有审批单的审批，隐藏nowValue */}
                      {/* 狗日的颜色需求 */}
                      {/*
                        resumeResult = agree 并且
                        resumeSummaryVPO.autoTrigger = false  时候绿色
                    */}

                      {self &&
                      item.resumeType === "termination" &&
                      item.resumeResult === "agree" &&
                      item.resumeSummaryVPO.autoTrigger ? (
                        ""
                      ) : item.resumeSummaryVPO.nowValue ? (
                        item.resumeSummaryVPO.nowValue
                          .split("|")
                          .map((txt, idx) => (
                            <div
                              className={`growth-current-resume-${colorMapper[
                                item.resumeResult === "agree"
                                  ? item.resumeSummaryVPO.autoTrigger
                                    ? "success"
                                    : "agree"
                                  : item.resumeResult
                              ]}`}
                              key={idx}
                            >
                              {txt}
                            </div>
                          ))
                      ) : (
                        <div>
                          <div>{item.resumeSummaryVPO.deptName}</div>
                          <div>{item.resumeSummaryVPO.position}</div>
                        </div>
                      )}
                    </div>
                  </TimeLineItem>
                );
              })}
            </TimeLine>
          </div>
        ) : (
          <div className="growth-current-empty">
            {/* <img
              className="growth-current-empty-pic"
              src="https://gw.alicdn.com/tfs/TB1A5G0lgoQMeJjy0FpXXcTxpXa-212-260.png"
            /> */}
            <div className="growth-current-empty-text">无历史成长记录</div>
          </div>
        )}
      </div>
    );
  }
}

CurrentJob.propTypes = {
  jobInfo: PropTypes.object,
  onAddHireTime: PropTypes.func
};
